<template>
  <!-- 了解我们(首页)-->
  <div class="container-fluid">
    <div class="row carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner2-2.png"
            class="d-block w-100"
            alt="..."
          >
        </div>
        <div class="Suspension">
          <p class="cla">了解我们</p>
          <ul class="kuang">
            <li class="alone">
              <p class="child">品牌故事</p>
            </li>
            <li class="alone1">
              <p class="child">企业简介</p>
            </li>
            <li class="alone2">
              <p class="child">发展进程</p>
            </li>
            <li class="alone3">
              <router-link to="/HarbinDynamics">
                <p class="child">哈工动态</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="character row">
      <div class="intermediate">
        <div class="Tounderstanding"></div>
        <div class="Avatar"></div>
        <div class="story">
          <div class="Brand"></div>
          <div class="son">
            <p class="son1">4年前，我决定让7岁的儿子学习编程。</p>
            <p class="son1">在进行了7家机构的线上/线下试听课后，我发现：线上课，孩子需要长时间面对电脑；线下课，枯燥且不成体系……</p>
            <p
              class="son1"
            >再三比较思考后，我决定自己来教授儿子编程，为了增加学习的趣味性，我找来自己的学弟——亚太大学生机器人大赛 一等奖，将编程与拼插机器人相结合。学习过程中儿子始终非常投入且乐于将自己的作品带去学校展示，吸引了不少同学来我家学习……令我意外的是，学习仅6个月后，他们竟然陆续获得了北京市科技创新一等奖、全国科技创新一等奖、青少年科技创新北京市市长奖等多项大奖。这让我意识到我们的教育方式不仅孩子们非常喜欢，还很有效。于是，我和学弟组建了专业团队，开始专注于“少儿拼插机器人编程”课程的研发与实践。</p>
            <p class="son1">3年来，我们为15个省，超过100所小学提供了少儿拼插机器人编程课程，获得校方与学生的一致好评。</p>
            <p class="son1">未来，我们将为更多学校和孩子提供更多孩子喜欢且有效的课程与产品。</p>
          </div>
        </div>
      </div>
      <div class="article">
        <p class="data-sized">公司简介</p>
          <div class="son2">
            <p
              class="son1"
            >北京哈工科教机器人科技有限公司（简称：哈工科教），英文名：HTE-ROBOT Innovation，成立于2016年，创始人：雷深皓。总部位于北京，专注于5—18岁少年儿童机器人与人工智能基础教育。 将少儿编程、机器人智能硬件，以及人工智能基础知识体系与中国基础教育直接相关的核心要素，如孩子的成长环境、学习习惯、兴趣爱好等方面深度融合。研发了自主知识产权的机器人智能硬件产品，并推出了与机器人智能硬件匹配适用的多应用编程工具平台——“逗包编程”，以及面向基础教育的人工智能专业教室致力于为5—18岁少年儿童提供有趣且有效的编程学习体验。2019年推出“MAHT教学法”，将少儿机器人编程的家庭教育、学校教育及社会教育相互结合，使学生的学习方式多样化、场景化、链条化、个性化。</p>
          </div>
        </div>
      <div class="article">
        <p class="data-sized">业务介绍</p>
          <div class="son2">
            <p
              class="son1"
            >北京哈工科教机器人科技有限公司提供哈工科教少儿机器人编程教育、机器人与智能制造青少年科技培养基地运营、面向基础教育的人工智能专业教室整体解决方案等服务。涵盖师资培训、体系课程、教材教辅、基地研学等内容的完整的拼插机器人编程学习解决方案。</p>
          </div>
        </div>
    </div>
    <div class="development row">
      <div class="process">
        <div >
        <p class="data-sized">发展历程</p>
        </div>
        <div class="lunbo">
          <div class="datu">
            <!-- <img
              class="time"
              src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/time.png"
              style="left:0"
              alt
            >-->
            <!-- <div class="yuan" @click="dian"></div> -->
            <div class="row Deeds">
              <div class="col">
                <div class="Deedscenter">
                  <!-- <div class="pull-left">
                    <span class="btn btn-info" @click="prev">zuo</span>
                  </div>-->
                  <div class="pull-left Deed123">
                    <div
                      class="Deedscore"
                      id="Deedscore"
                      :style="{ width: `${295 * this.num + 800}px`, marginLeft: `${marginLeft}px` }"
                    >
                      <div class="Deed" v-for="(v,i) in num" :key="`Deeds${i}`" :class="isbott(i)">
                        <div class="Deedstop" :class="isbott(i)">
                          <div class="Deeds2-7 container-fluid">
                            <dir class="row">
                              <div class="pull-left Deeds2-7-img">
                                <img :src="v.imgs" width="100" height="100" alt>
                              </div>
                              <div class="pull-left Deeds2-7-text">
                                <h5 v-text="v.title"></h5>
                                <p class="Deedtext" v-text="v.text"></p>
                              </div>
                            </dir>
                          </div>
                        </div>
                        <el-tooltip :content="v.times" :placement="isbott(i)?'top': 'bottom'">
                          <div class="rounded-circle" @click="index=i"></div>
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                  <!-- <div class="pull-right">
                    <span class="btn btn-info" @click="next">you</span>
                  </div>-->
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="lt" :class="dis(0)" @click="prev" href="javascript:void(0)">&lt;</div>
          <div class="gt" :class="dis(1)" @click="next" href="javascript:void(0)">&gt;</div>
        </div>
      </div>
    </div>
   <div class="article">
        <p class="data-sized">解决方案</p>
        <p class="data-sizedd">MAHT教学法</p>
          <div class="son2">
            <p
              class="son1"
            >哈工科教2019年推出“MAHT教学法”，将少儿机器人编程的家庭教育、学校教育及社会教育相互结合，使学生的学习方式多样化、场景化、链条化、个性化。</p>
            <p
              class="son1"
            >MAHT教学法主张，让孩子通过在线学习的方式独立完成知识的学习和内化过程；通过线下小组答疑讨论（哈克尼斯圆桌）的方式完成知识的复盘和固化过程；通过线下主题活动进行项目式的学习（PBL）完成知识的二次复盘、拓展性思考、运用及产出过程，从而将知识转化为孩子可以使用的能力。</p>
          </div>
        </div>
   <div class="article7">
        <p class="data-sized">课程体系</p>
        <p class="data-sizedd">科学启蒙 大颗粒积木</p>
          <div class="son2">
            <p
              class="son1"
            >孩子可以通过动手搭建和实验了解顺序概念，掌握时间空间的概念，建立形状认知。提升孩子专注力、想象力和创造力。寓教于乐，培养孩子动手能力、表达能力、以及发现问题解决问题的能力。</p>
          </div>
        <p class="data-sizedd">探索科学原理 小颗粒积木</p>
          <div class="son2">
            <p
              class="son1"
            >孩子在搭建积木的过程中学会观察与分析，体验成就感，培养耐心和专注力，锻炼动手能力、逻辑思维能力、沟通能力。循序渐进的课程安排，孩子可以在实践中接触到机械、几何、数学、结构、能源等知识。</p>
          </div>
        <p class="data-sizedd">C/C++基础编程</p>
          <div class="son2">
            <p
              class="son1"
            >学习程序设计语言C/C++与程序设计知识、计算机基本常识和基本操作等专业知识，为参加专业类赛事打下基础。</p>
          </div>
        <p class="data-sizedd">Python人工智能编程</p>
          <div class="son2">
            <p
              class="son1"
            >学习Python人工智能编程系列课程，实现从懂编程知识到独立完成编程项目的转变。</p>
          </div>
        <p class="data-sizedd">机器人与人工智能专业大学先修课</p>
          <div class="son2">
            <p
              class="son1"
            >学习机器人与人工智能专业相关素质拓展类课程及专业导论类课程，提升学生的综合素质。</p>
          </div>
        </div>
        <div class="article6">
        <p class="data-sizede">企业文化</p>
          <div class="son2">
            <p
              class="son1"
            >规格严格,功夫到家</p>
          </div>
        </div>
        <div class="article6">
        <p class="data-sizede">企业理念</p>
          <div class="son2">
            <p
              class="son1"
            >整合教育资源，培养具有全球视野和国际水平的高端科创人才</p>
          </div>
        </div>
        <div class="article6">
        <p class="data-sizede">企业口号</p>
          <div class="son2">
            <p
              class="son1"
            >AI编程、赢未来</p>
          </div>
        </div>
        <div class="article6">
        <p class="data-sizede">企业愿景</p>
          <div class="son2">
            <p
              class="son1"
            >让孩子脱颖而出，站在AI的肩膀上。</p>
          </div>
        </div>
    <div class="Founding row">
      <div class="process1">
        <div class="chuangshi">
          <p class="data-sized">团队风采</p>
        </div>
        <div class="leader"></div>
      </div>
    </div>
    <div class="article1">
        <p class="data-sized">管理团队</p>
        <p class="data-sizedd">雷深皓：首席执行官</p>
          <div class="son2">
            <p
              class="son1"
            >负责处理公司的日常经营事务，具有对公司事务的管理权和代理权。</p>
          </div>
        <p class="data-sizedd">俞忠达：首席技术官</p>
          <div class="son2">
            <p
              class="son1"
            >负责公司主营产品的研发，打造少儿机器人编程教育教学体系，创建并完善机器人与人工智能教室解决方案。</p>
          </div>
        <p class="data-sizedd">杜雪峰：首席财务官</p>
          <div class="son2">
            <p
              class="son1"
            >为公司财务建立核算体系和财务监控体系，形成有效内部控制，协调公司财务资源，参与公司发展相关事项的分析和决策。</p>
          </div>
        <p class="data-sizedd">雷添毅：首席营销官</p>
          <div class="son2">
            <p
              class="son1"
            >负责在企业中对营销思想进行定位；把握市场机会，制定市场营销战略和实施计划，完成企业的营销目标；协调企业内外部关系，对企业市场营销战略计划的执行进行监督和控制。</p>
          </div>
        </div>
    <div class="article2">
        <p class="data-sized">公司地址</p>
        <p class="data-sizedd">总部地址</p>
          <div class="son2">
            <p
              class="son1"
            >北京市上奥世纪中心A座</p>
          </div>
        <p class="data-sizedd">哈工科教少儿机器人编程校区</p>
          <div class="son2">
            <p
              class="son1"
            >哈工科教少儿机器人编程厦大校区（厦门）：厦门市思明区思明南路408号之五-02</p>
            <p
              class="son1"
            >哈工科教少儿机器人编程锦江校区（成都）：成都市锦江区通源街212号1层</p>
            <p
              class="son1"
            >哈工科教少儿机器人编程海顿校区（合肥）：合肥市包河区太湖路111号海顿公馆A3商业方尼教育内</p>
            <p
              class="son1"
            >哈工科教少儿机器人编程红玺台校区（合肥）：合肥市庐阳区固镇路海亮红玺台S8-1方尼教育内</p>
          </div>
        </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "Understand",
  data() {
    const num = [
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/2016.40.png",
        times: "2016.04",
        title: "2016.4",
        text: "北京哈工科教机器人科技有限公司注册成立。"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/2016.8.png",
        times: "2016.08",
        title: "2016.8",
        text: "哈工科教首届少儿机器人编程小学员参与课程学习。"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/2017.2.png",
        times: "2017.02",
        title: "2017.2",
        text:
          "学员斩获北京市科技创新1等奖，全国科技创新1等奖，青少年科技创新北京市市长奖。"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/2017.4.png",
        times: "2017.04",
        title: "2017.4",
        text: "哈工科教少儿机器人编程课程体系开始在黑龙江省多所学校进行试授课。"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/2017.9.png",
        times: "2017.09",
        title: "2017.9",
        text:
          "哈工科教少儿机器人编程课程1.0版本上线——“逗包”机器人编程教育资源库上线"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/2017.12.png",
        times: "2017.12",
        title: "2017.12",
        text: "哈工科教少儿机器人编程教师资源平台搭建完成。"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/2018.1.png",
        times: "2018.01",
        title: "2018.1",
        text:
          "与广东省教育出版社机构达成深度合作意向——共同编纂教程《STEAM创新教育实验教"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/2018.5.png",
        times: "2018.05",
        title: "2018.5",
        text: "学院作品荣获69届英特尔国际科学与工程大奖赛（Intel ISFE）。"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/2018.7.png",
        times: "2018.07",
        title: "2018.7",
        text: "完成全国范围内完成10000小时“哈工科教云课堂”教学实验。"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/2019.3.png",
        times: "2019.03",
        title: "2019.3",
        text: "少儿机器人编程PBL(项目式学习)课程2.0版本上线。"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/yixiangshu.png",
        times: "2019.05",
        title: "2019.5",
        text: "哈工科教与哈尔滨工业大学达成战略合作，共建“哈工大机器人与智能制造青少年科技培养基地”。"
      },
      {
        imgs:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/44.jpg",
        times: "2019.06",
        title: "2019.6",
        text: "哈工科教与哈工大共同筹建的“哈工大机器人与智能制造青少年科技培养基地”正式启动。"
      },
    ];
    return {
      num,
      timer: null,
      marginLeft: 0,
      index: 0
    };
  },

  watch: {
    index(v) {
      //   console.log(v);
      if (v >= this.num.length - 1) {
        this.index = 0;
      }
      this.marginLeft = v * -295;
    }
  },
  mounted() {
    // this.width = this.num.length * 295 + 800 + "px";
    // const Deedscore = document.getElementById("Deedscore");
    // Deedscore.onmousemove = () => {
    //   clearInterval(this.timer);
    // };
    // Deedscore.onmouseout = () => {
    //   this.timer = setInterval(async () => {
    //     this.index++;
    //   }, 4000);
    // };
    // this.timer = setInterval(async () => {
    //   this.index++;
    // }, 4000);
    $(".alone").click(function() {
      scrollTo(0, 427);
      $(".alone")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone1").click(function() {
      scrollTo(0, 1285);
      $(".alone1")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    $(".alone2").click(function() {
      scrollTo(0, 1877);
      $(".alone2")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
    // $(".alone3").click(function() {
    //   scrollTo(0, 3657);
    //   $(".alone3")
    //     .addClass("stage1")
    //     .siblings()
    //     .removeClass("stage1");
    // });
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    prev() {
      if (this.index >= 1) {
        this.index--;
      }
    },
    next() {
      if (this.index <= this.num.length - 3) {
        this.index++;
      }
    },
    isbott(i) {
      if (i % 2) {
        return "direction";
      }
    },
    dis(v) {
      if (this.index === 8) {
        if (v) {
          return "btn btn-light";
        }
      } else if (this.index === 0) {
        if (!v) {
          return "btn btn-light";
        }
      }
      return "btn btn-primary";
    }
  }
};
</script>

<style scoped>
/*index.vue  scoped独有 */
.data-sized{
  font-family: pictos;
  text-align: center;
  font-size: 45px;
  letter-spacing: 10px;
}
.data-sizede{
  font-family: pictos;
  font-size: 37px;
  text-indent: 39px;
  letter-spacing: 10px;
}
.data-sizedd{
  font-family: pictos;
  font-size: 27px;
      text-indent: 39px;
  letter-spacing: 10px;
}
.data-sizedf{
  font-family: pictos;
  text-align: center;
  font-size: 27px;
  letter-spacing: 10px;
}
.carousel-inner {
  min-width: 1200px;
}
@font-face {
  font-family: pictos;
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/font.TTF");
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/font.TTF")
      format("woff"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/font.TTF")
      format("truetype"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/font.TTF")
      format("svg");
}
@font-face {
  font-family: heiti;
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/AdobeHeitiStd-Regular.otf");
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/AdobeHeitiStd-Regular.otf")
      format("woff"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/AdobeHeitiStd-Regular.otf")
      format("truetype"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/AdobeHeitiStd-Regular.otf")
      format("svg");
}
@font-face {
  font-family: gaoduanhei;
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF");
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("woff"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("truetype"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("svg");
}
.character {
  min-width: 1200px;
  height: 1335px;
      margin-bottom: 114px;
}
.intermediate {
  width: 1200px;
  height: 858px;
  margin: 0 auto;
}
.Tounderstanding {
  width: 205px;
  height: 36px;
  margin: 0 auto;
  margin-top: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/liaojie.png");
}
.Avatar {
  position: absolute;
  width: 383px;
  height: 463px;
  margin-top: 217px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/img.png");
}
.story {
  width: 678px;
  height: 560px;
  margin-top: 131px;
  float: right;
  margin-bottom: 50px;
}
.Brand {
  width: 573px;
  height: 23px;
  margin: 0 auto;
  margin-bottom: 50px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/Layer8.png");
}
.son {
  width: 679px;
  height: 487px;

  /* background: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/nianqian.png"); */
}
.son1 {
  font-family: "微软雅黑";
  font-size: 19px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #8d8d8d;
  text-indent: 39px;
  line-height: 35px;
  margin-bottom: 0;
  text-align: justify;
}
.development {
  min-width: 1200px;
  height: 800px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/meilitu.png");
}
.process {
  width: 1200px;
  height: 800px;
  margin: 0 auto;
}
.tu {
  width: 203px;
  height: 36px;
  margin: 0 auto;
  margin-top: 64px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/fazhan.png");
}
.lunbo {
  width: 1200px;
  height: 490px;
  margin-top: 113px;
}
.datu {
  position: absolute;
  width: 940px;
  height: 496px;
  margin-left: 127px;
  overflow: hidden;
}
.time {
  position: absolute;
  transition-delay: 0;
  transition-timing-function: linear;
  transition-property: all;
  transition-duration: 1s;
}
.lt {
  position: absolute;
  width: 42px;
  height: 42px;
  margin-top: 221px;
}
.gt {
  width: 42px;
  height: 42px;
  float: right;
  margin-top: 221px;
}
.Founding {
  min-width: 1200px;
  height: 955px;
}
.process1 {
  width: 1200px;
  height: 843px;
  margin: 0 auto;
}
.chuangshi {
  width: 208px;
  height: 36px;
  margin: 0 auto;
  margin-top: 26px;
  margin-bottom: 130px;
}
.leader {
  height: 544px;
  margin-bottom: 130px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/team.png");
}
.article {
  height: 343px;
      width: 1200px;
    margin: 0 auto;
}
.article7 {
  height: 670px;
      width: 1200px;
    margin: 0 auto;
}
.article6 {
  height: 150px;
      width: 1200px;
    margin: 0 auto;
}
.article1 {
  height: 518px;
      width: 1200px;
    margin: 0 auto;
}
.article2 {
  height: 415px;
      width: 1200px;
    margin: 0 auto;
}
/* .yuan {
  position: absolute;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: red;
  margin-top: 235px;
  margin-left: 704px;
} */

.Deeds {
  height: 500px;
  padding-top: 5px;
  padding-bottom: 5px;
  min-width: 1200px;
  background-position-x: center;
  background-position-y: 130px;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}
.Deed123 {
  width: 940px;
  overflow: hidden;
  /* overflow-x: scroll; */
}
.Deedscore {
  height: 490px;
  padding-left: 310px;
  padding-right: 240px;
  display: flex;
  flex-wrap: nowrap;
  background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/time_background.png);
  background-position-y: center;
  background-repeat: repeat-x;
  transition: all 1s ease-in-out 0s;
  /* animation-name: identifier1;
  animation-direction: alternate;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; */
}

@keyframes identifier1 {
  from {
    margin-left: 0%;
  }
  to {
    margin-left: -2360px;
  }
}

.Deed {
  flex: 1;
  display: flex;
  position: relative;
  margin-left: -30px;
  margin-right: -30px;
}

.direction {
  flex-direction: column-reverse;
  display: flex;
}

.Deeds2-7 {
  width: 356px;
  height: 138px;
  border: solid 2px #1873ef;
  background: #f6f6f6;
}
.Deeds2-7-img {
  margin: 15px 12px;
  width: 100px;
  height: 100px;
}
.Deeds2-7-text {
  margin: 15px 12px;
  width: 200px;
  height: 100px;
  color: rgb(88, 88, 88);
}
.Deedtext {
  font-size: 13px;
  line-height: 22px;
  text-indent: 26px;
  letter-spacing: 1.5px;
}

.Deedstop {
  height: 245px;
  width: 356px;
}
.DeedsMiddle {
  height: 20px;
  width: 100%;
}
.Deedscenter {
  width: 1200px;
  margin: 0 auto;
}

.centerleft {
  background: rgb(24, 115, 239);
  height: 5px;
}
.rounded-circle {
  position: absolute;
  left: 165px;
  height: 20px;
  width: 20px;
  background: rgb(24, 115, 239);
  top: 238px;
}

.btn-light {
  background: #8fbfff;
  border-color: #8fbfff;
}
.Suspension {
  position: fixed;
  z-index: 1;
  width: 136px;
  top: 40%;
  left: 0px;
  margin: auto;
  margin-left: 10px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/xuanfu2.0.png");
}
.kuang {
  margin-top: 51px;
}
.alone {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
}
.alone:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone1 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 38px;
  line-height: 38px;
  cursor: pointer;
}
.alone1:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone2 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 38px;
  line-height: 38px;
  cursor: pointer;
}
.alone2:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone3 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  cursor: pointer;
  height: 45px;
  line-height: 45px;
  cursor: pointer;
}
.alone3 a{
  color:#ffffff;
}
.alone3:hover {
  background: #c2e0ff;
  color: #317dd2;
  border-radius: 0 0 0 8px;
}
.child {
  font-family: "黑体";
  font-size: 16px;
  margin-bottom: 0px;
  cursor: pointer;
  text-shadow: 1px 1px 4px #2e70bf;
}
.child:hover{
  text-shadow: 0px 0px 0px #2e70bf;
}
.cla {
  font-family: "gaoduanhei";
  font-size: 20px;
  margin-bottom: -33px;
  text-align: center;
  margin-top: 2px;
  color: #ffffff;
  line-height: 34px;
  text-shadow: 1px 1px 4px #d98a02;
}
.stage1 {
  color: orange;
}
</style>